<template>
  <page-meta :root-font-size="rootFontSize() + 'px'"></page-meta>

  <view class="page-container">
    <customHeader :title="header_title" />

    <view class="course-container" :style="{ top: height }">
      <view class="course-wrapper">
        <view class="course-row" v-for="item in courseInfos" :key="item.name" @click="doStartLearn(item)">
          <view class="row-label">
            <text class="label-title">{{ item.name }}</text>
            <text class="label-desc">{{ item.sub_title }}</text>
          </view>
          <image class="row-tag"
            :src="item.status == 0 ? statusLuckIcon : item.status == 1 ? statusCurrentIcon : statusSuccessIcon" />
        </view>
      </view>
    </view>
  </view>

  <CwCommon />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { rootFontSize, util } from "@/utils/util";
import customHeader from "@/components/customHeader.vue";
import API from "@/api";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { Course } from "@/pages/selfInspection";
import { getAnyApp } from "@/common/hooks";
import { handleSetCallFunction } from "@/pages/lowPricedCourse/trialCourseHome/index";

const statusLuckIcon = "https://rwstatic.tentons.cn/web/Lesson/images/lock-icon.png";
const statusCurrentIcon = "https://rwstatic.tentons.cn/web/Lesson/images/current-icon.png";
const statusSuccessIcon = "https://rwstatic.tentons.cn/web/Lesson/images/status-success.png";

export interface ILessonResult {
  isRelearn: boolean; // 是否是重学
  isNeedLaunchPage: boolean; // 是否需要进入launch页面
  data: any;
  [x: string]: any;
}

interface IResult {
  guide: number;
  subCourse: ISubCourse[];
}

interface ISubCourse {
  name: string;
  status: number;
  sub_title: string;
  type: number;
  [x: string]: any;
}

const height = ref(getApp().globalData!.pageTop);
const header_title = ref("");
const section_id = ref<number>(-1);
const courseInfos = ref<ISubCourse[]>([]);
const { CHEESE } = getAnyApp();

onLoad(async (option: any) => {
  header_title.value = option.header_title;
  section_id.value = Number(option.section_id);
});

onShow(async () => {
  const result = (await API.subCourseList({ section_id: section_id.value })) as IResult;
  courseInfos.value = result.subCourse;
});

const doStartLearn = async (item: ISubCourse) => {
  console.log(`开始学习: ${item.name} 状态:${item.status} 类型:${item.type}`);
  if (item.status === 0) {
    return util.showDialogue("按顺序学习后解锁喔");
  }

  if (item.type == 6) {
    Course.init(section_id.value, () => {
      CHEESE.Router.to({ url: Course.currentRouter });
    });
  } else {
    let { func, lessonPage } = handleSetCallFunction(item.type);

    if (func) {
      func(section_id.value).then((res: ILessonResult) => {
        if (res.isNeedLaunchPage) {
          uni.navigateTo({
            url: `/pages/lowPricedCourse/trialCourseHome/transitionPage/index?courseStep=${item.type}&section_id=${section_id.value}&data=${encodeURIComponent(JSON.stringify(res))}`,
          });
        } else {
          if (item.type === 0 && res.isPreLearn) {
            lessonPage = "/pages/lowPricedCourse/dialogueOriginText/preLearnWords/index";
          }

          uni.navigateTo({
            url: `${lessonPage}?section_id=${section_id.value}&courseStep=${item.type}&data=${encodeURIComponent(JSON.stringify(res))}`,
          });
        }
      })
        .catch((err) => { });
    }
  }
};
</script>

<style scoped lang="scss">
.page-container {
  width: 100vw;
  height: 100vh;
  background-color: #f8ecd8;

  .course-container {
    position: absolute;
    width: 37.5rem;
    top: 10rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #f8ecd8;

    .course-wrapper {
      width: 100%;
      height: calc(100% - 5.8rem);
      padding-top: 1.8rem;
      margin-bottom: 4rem;
      overflow: auto;

      .course-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 7.8rem;
        margin: 0 1.6rem 0.8rem;
        border-radius: 1.2rem;
        padding-left: 2rem;
        padding-right: 2.2rem;
        background-color: #ffffff;
        border: 2px solid #cf9c49;

        .row-label {
          display: flex;
          flex-direction: column;
          margin-right: 3.75rem;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .label-title {
            margin-bottom: 0.6rem;
            font-size: 1.7rem;
            font-family: xiaolai;
            color: $uni-text-color;
          }

          .label-desc {
            font-size: 1.2rem;
            font-family: xiaolai;
            color: $uni-text-color-grey;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .row-tag {
          width: 2.2rem;
          height: 2.2rem;
        }
      }
    }
  }
}
</style>
